<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="base/head::head"/>
<!--角色管理-->
<body>
<div th:replace="base/load::load"/>
<div id="table-tool">
    <a id="btn-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="onOpenAddDialog()">新增</a>
    <a id="btn-edit" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="onOpenEditDialog()">修改</a>
    <a id="btn-remove" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="onRemove()">删除</a>
    <a id="btn-refresh" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true" onclick="onRefresh()">刷新</a>
    <a id="btn-menu" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-role-menu',plain:true" onclick="onOpenMenuDialog()">关联菜单</a>
</div>
<table id="table" class="easyui-datagrid" data-options="url:'list',method:'get',fit:true,singleSelect:true,rownumbers:true,toolbar:'#table-tool'">
    <thead>
    <tr>
        <th data-options="field:'id',checkbox:true"></th>
        <th data-options="field:'roleDisplay',width:100">名称</th>
        <th data-options="field:'roleName',width:100">标识</th>
        <th data-options="field:'roleType',width:100">类型</th>
        <th data-options="field:'showOrder',width:100">排序</th>
        <th data-options="field:'roleComment'">备注</th>
    </tr>
    </thead>
</table>

<!--弹出框-->
<div id="dialog" class="easyui-dialog uq_dialog" data-options="title:'操作',closed:true,buttons:'#dialog-tool'">
    <form id="form" method="post">
        <table>
            <tr>
                <td>角色名称</td>
                <td>
                    <input id="id" name="id" type="hidden"/>
                    <input id="pid" name="pid" type="hidden"/>
                    <input name="roleDisplay" class="easyui-textbox" style="width: 200px" data-options="required:true"/></td>
                <td>角色标识</td>
                <td><input name="roleName" class="easyui-textbox" style="width: 200px" data-options="required:true"/></td>
            </tr>
            <tr>
                <td>角色类型</td>
                <td>
                    <select name="roleType" class="easyui-combobox" style="width: 200px" data-options="value:0,panelHeight:'auto',required:true">
                        <option value="0">系统</option>
                        <option value="1">其他</option>
                    </select>
                </td>
                <td>显示排序</td>
                <td><input name="showOrder" class="easyui-numberspinner" style="width: 200px" data-options="min:0,required:true"/></td>
            </tr>
            <tr>
                <td>角色备注</td>
                <td colspan="3"><input name="roleComment" class="easyui-textbox" style="width: 100%" data-options="multiline:true,height:60"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-tool">
    <a id="dialog-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="onSave()">保存</a>
    <a id="dialog-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog').dialog('close')">关闭</a>
</div>

<!--弹出框 设置菜单权限-->
<div id="dialog-menu" class="easyui-dialog uq_dialog" data-options="title:'关联菜单权限',closed:true,buttons:'#dialog-menu-tool'">
    <form id="form-menu" method="post">
        <table>
            <tr>
                <td>菜单列表</td>
                <td>
                    <input name="rid" type="hidden"/>
                    <input id="mids" name="mids" class="easyui-combotreegrid" style="width: 200px" data-options="
                    width:'100%',panelWidth:360,multiple:true,
                    url:'../menu/tree',method:'get',treeField:'menuName',idField:'id',required:true,columns:[[
                        {field:'menuName',title:'菜单名称',width:200},
                        {field:'menuPath',title:'路径',width:160}
                    ]]
                    "/>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="dialog-menu-tool">
    <a id="dialog-menu-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="onRoleMenuSave()">保存</a>
    <a id="dialog-menu-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog-menu').dialog('close')">关闭</a>
</div>
<script type="text/javascript" th:src="@{/utils/Extend.js}"></script>
<script type="text/javascript" th:src="@{/utils/System.js}"></script>
<script type="text/javascript">
    function onOpenMenuDialog() {

        var rows = $("#table").datagrid("getSelections");
        if (rows == null || rows.length == 0) {
            AlertUtil.warning("请选择后，再操作！");
            return;
        }
        if (rows.length != 1) {
            AlertUtil.warning("每次只能操作一条数据！");
            return;
        }
        var row = rows[0];
        $("#form-menu input[name=rid]").val(row.id)
        $("#dialog-menu").dialog("open");
        getMenuIds(row.id);
    }

    function getMenuIds(roleId) {
        AjaxUtil.get("../rolemenu/getMenuItems?rid=" + roleId, function (data) {
            $("#mids").combotreegrid("setValues", data);
        });
    }

    function onRoleMenuSave() {
        // 角色id
        var rid = $("#form-menu input[name=rid]").val();
        // 获取菜单id与状态
        var g = $("#mids").combotreegrid('grid');
        var kv = g.treegrid("getAllChecked", true);

        var checkBool = $("#form-menu").form("validate");
        if (checkBool == false) {
            return;
        }
        var str = JSON.stringify(kv)
        AjaxUtil.post("../rolemenu/bi", {"rid": rid, "mids": str}, function (data) {
            AlertUtil.info(data.msg)
            if (data.code == 1) {
                $("#dialog-menu").dialog("close");
            }
        });

    }
</script>
</body>
</html>